<!--
 * @Description: 登录
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-10-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-04-24
-->
<script lang="ts" setup>
  import { ref } from 'vue'

  import { requestAuthPhone } from '@/api/system/ysys-user/unAuth/wxMini'
  import Back from '@/components/Back/Back.vue'
  import { HttpCodeEnum } from '@/enum/httpEnum'
  import { sysPng } from '@/enum/imageEnum'
  import { wxAuth } from '@/utils/auth'
  import { getLoginCode } from '@/utils/storage'
  import { PAGE_TITLE } from '@/enum/pageEnum'

  /**
   * 手机号快捷登录
   * @param e 手机号授权按钮
   */
  const getPhoneNumber = async (e: any) => {
    uni.showLoading({ title: '登录中...' })
    const { errMsg, code } = e.detail
    if (errMsg === 'getPhoneNumber:ok') {
      const { responseCode } = await requestAuthPhone({ wxCode: code, code: getLoginCode() })
      if (responseCode === HttpCodeEnum.SUCCESS) {
        await wxAuth()
        uni.showToast({ title: '登录成功', icon: 'none' })
        setTimeout(() => goBack(), 1000)
      }
    }
    uni.hideLoading()
  }

  /** 提示 */
  const showTip = () => uni.showToast({ title: '请先同意《用户协议》及《隐私政策》', icon: 'none' })

  /**
   * 返回上一页
   */
  const goBack = () => uni.navigateBack()

  /** 是否选中用户协议&隐私政策 */
  const protocolChecked = ref(false)

  /**
   * 路由跳转：用户协议
   */
  const goProtocol = async () => uni.navigateTo({ url: `/pages/sys/protocol` })

  /**
   * 路由跳转：隐私条款
   */
  const goPrivacy = async () => uni.navigateTo({ url: `/pages/sys/privacy` })
</script>

<template>
  <Back />
  <view class="login">
    <image class="logo" :src="sysPng.login.logo" />
    <view class="title">{{PAGE_TITLE}}</view>
    <view class="auth">请确认以下授权信息</view>
    <view class="phone">·获取你的手机号</view>
    <template v-if="protocolChecked">
      <button class="wxLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
    </template>
    <template v-else>
      <button class="wxLogin" @click="showTip">手机号快捷登录</button>
    </template>
    <view class="protocol">
      <image class="protocol-check" :src="protocolChecked ? sysPng.login.check : sysPng.login.uncheck" @click="protocolChecked = !protocolChecked" />
      <text class="protocol-text">阅读并同意</text>
      <text class="protocol-btn" @click="goProtocol()">《用户协议》</text>
      <text class="protocol-text">及</text>
      <text class="protocol-btn" @click="goPrivacy()">《隐私政策》</text>
    </view>
  </view>
</template>

<style lang="less">
  page {
    height: 100%;
    background: linear-gradient(180deg, #b5f5ec 0%, #fff 100%);
  }
</style>

<style lang="less" scoped>
  .login {
    padding-top: 240rpx;
  }

  .logo {
    display: block;
    width: 176rpx;
    height: 176rpx;
    margin: auto;
  }

  .title {
    margin-top: 30rpx;
    font-size: 36rpx;
    font-weight: bold;
    line-height: 50rpx;
    color: #1d2129;
    text-align: center;
  }

  .auth {
    margin-top: 80rpx;
    font-size: 32rpx;
    line-height: 48rpx;
    color: #4e5969;
    text-align: center;
  }

  .phone {
    margin-top: 32rpx;
    font-size: 28rpx;
    line-height: 44rpx;
    color: #1d2129;
    text-align: center;
  }

  .wxLogin {
    width: 654rpx;
    height: 88rpx;
    margin-top: 128rpx;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 88rpx;
    color: #00474f;
    background: linear-gradient(180deg, #87e8de 0%, #13c2c2 100%);
    border-radius: 44rpx;
    box-shadow:
      0 8rpx 16rpx 0 rgb(19 194 194 / 50%),
      inset 0 -2rpx 6rpx 0 rgb(255 255 255 / 50%);
  }

  .protocol {
    display: flex;
    align-items: center;
    margin: 42rpx 0 0 80rpx;

    .protocol-check {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
    }

    .protocol-text {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #1d2129;
    }

    .protocol-btn {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #08979c;
    }
  }
</style>
